import { Tooltip } from 'antd';
import React, { forwardRef, useImperativeHandle } from 'react';
import styles from './styles.module.scss'
import { Progress } from 'antd';
import { useRequest, useSafeState } from 'ahooks';
import { getFootballIncidents, getFootballStatistics } from "@/server/live"
import cornerKick from '@/assets/score/corner_kick.png'
import goalBall from '@/assets/score/goal.png'
import hongpai from "@/assets/score/hongpai.png"
import huanren from '@/assets/score/replacement.png'
import huangpai from '@/assets/score/huangpai.png'
import dianqiu from '@/assets/score/point.png'
import jinqiu from '@/assets/score/jinqiu.png'
import RenderJudge from '@/components/RenderJudge';
import { useRef } from 'react';
import { useEffect } from 'react';
const types = {
  1: { name: '进球', src: jinqiu.src },
  2: { name: '角球', src: cornerKick.src }, //=== cornerKick
  3: { name: '黄牌', src: huangpai.src },
  4: { name: '红牌', src: hongpai.src },
  5: '界外球',
  6: '任意球', //=== freeKick
  7: { name: '球门球', src: goalBall.src },// === goalBall
  8: { name: '点球', src: dianqiu.src }, //=== penaltyKick
  9: { name: '换人', src: huanren.src },
  10: '比赛开始',
  11: '中场',
  12: '结束',
  13: '半场比分',
  15: '两黄变红',
  16: '点球未进',
  17: '乌龙球',
  19: '伤停补时',
  21: '射正', //=== shootRight
  22: '射偏', //=== shootDeviation
  23: '进攻', //=== attack
  24: '危险进攻',//=== dangerAttack
  25: '控球率',
  26: '加时赛结束',
  27: '点球大战结束',
  28: 'VAR(视频助理裁判)',
  29: '点球(点球大战)',//(type_v2字段返回)
  30: '点球未进(点球大战)',//(type_v2字段返
}

const statistics = [
  "比分",
  "半场",
  "红牌",
  "黄牌",
  "角球",
  "加时",
  "点球"
]






// eslint-disable-next-line react/display-name
const Content = forwardRef(({ row }, ref) => {
  const [list, setList] = useSafeState([])
  const [detail, setDetail] = useSafeState([])
  const { run } = useRequest(getFootballIncidents, {
    onSuccess: res => {
      setList(res.reverse())
    },
    manual: true
  })



  const { run: getDetail } = useRequest(getFootballStatistics, {
    onSuccess: res => {
      const homeData = res?.results?.score[2]?.map(r => r > -1 ? r : 0)
      const awayData = res?.results?.score[3]?.map(r => r > -1 ? r : 0)
      setDetail({ homeData, awayData })
    },
    manual: true
  })

  useImperativeHandle(
    ref,
    () => ({
      action: () => {
        console.log('XXXXXX')
        run(row?.id)
        getDetail(row?.id)
      }
    }),
  )

  useEffect(() => {
    run(row?.id)
    getDetail(row?.id)
  }, [])
  const item = (value) => typeof value === 'string' ? "" : (
    <>
      <img src={value?.src} style={{ width: 18 }} title={value.name} alt={value.name} />
    </>
  )


  const details = (row) => {
    const { type_v2: type } = row
    if (type === 9) {
      //换人
      return row?.in_player_name + "换下" + row?.out_player_name
    }

    if (type === 3) {
      return row?.player_name + "犯规黄牌"
    }

    if (type === 1) {
      return row?.player_name + "进球"
    }

    if (type === 4) {
      return row?.player_name + "犯规红牌"
    }
    const value = Reflect.get(types, row?.type_v2)
    return typeof value === 'string' ? value : value?.name
  }
  return (
    <section className={styles.live}>
      <p>
        <span>{row?.homeTeamName}</span>
        <span>{row?.awayTeamName}</span>
      </p>


      <section>
        {
          list?.map((row, index) => (
            <div key={index}>
              <span>
                <RenderJudge active={
                  <i style={{ margin: "0 5px" }}>
                    {details(row)}
                  </i>
                } value={row?.position === 1} />
                <i>
                  {row?.position === 1 ? item(Reflect.get(types, row?.type_v2)) : ""}
                </i>
              </span>
              <span>{row?.time + "'"}</span>
              <span>
                <i>
                  {(row?.position === 2 || row?.position === 0) ? item(Reflect.get(types, row?.type_v2)) : ""}
                </i>
                <RenderJudge value={
                  row?.position === 2 || row?.position === 0
                } active={
                  <i style={{ margin: "0 5px" }}>
                    {details(row)}
                  </i>
                } />
              </span>
            </div>
          ))
        }
      </section>

      <h5>技术统计</h5>
      <aside>
        {
          detail?.homeData?.map((row, index) => {
            const score = detail?.homeData[index] + detail?.awayData[index]
            return (
              <div key={index}>
                <i className={styles.home}>{detail?.homeData[index]}</i>
                <Progress percent={(detail?.homeData[index] / score) * 100} strokeColor="#49AA25" trailColor="rgba(0, 0, 0, 1)" showInfo={false} />
                <span className={styles.center}>{statistics[index]}</span>
                <Progress percent={(detail?.awayData[index] / score) * 100} strokeColor="#49AA25" trailColor="rgba(0, 0, 0, 1)" showInfo={false} />
                <i className={styles.away}>{detail?.awayData[index]}</i>
              </div>
            )
          })
        }
      </aside>
    </section >
  )
})



const LiveTips = ({ children, row }) => {
  const contentRef = useRef()
  const open = (value) => {
    if (value) contentRef?.current?.action()
  }

  return (

    <Tooltip onOpenChange={open} title={<Content ref={contentRef} row={row} open={open}></Content>} placement="bottomLeft" trigger="click" overlayInnerStyle={{ background: "var(--bgfff)", padding: 0 }} autoAdjustOverflow>
      {children}
    </Tooltip>
  )
}

export default LiveTips;